<template>
	<div>
		<el-dialog title="某某卡项详情" v-model="state.isShowDialog" width="1269px" append-to-body>
			<div class="cropper-warp">
				<el-table :data="state.goodsTableData" style="width: 100%;">
                    <el-table-column label="订单ID">
                        <template #default="scope">
							<!-- <span>{{ scope.row.id }}</span> -->
							<span>订单ID</span>
						</template>
                    </el-table-column>
                    <el-table-column label="订单来源">
                        <template #default="scope">
							<!-- <span>{{ scope.row.id }}</span> -->
							<span>活动</span>
						</template>
                    </el-table-column>
                    <el-table-column label="卡项名称">
                        <template #default="scope">
							<!-- <span>{{ scope.row.id }}</span> -->
							<span>卡项名称</span>
						</template>
                    </el-table-column>
                    <el-table-column label="规格">
                        <template #default="scope">
							<!-- <span>{{ scope.row.id }}</span> -->
							<span>33</span>
						</template>
                    </el-table-column>
                    <el-table-column label="属性">
                        <template #default="scope">
							<!-- <span>{{ scope.row.id }}</span> -->
							<span>计时</span>
						</template>
                    </el-table-column>
                    <el-table-column label="购买数量">
                        <template #default="scope">
							<!-- <span>￥{{ scope.row.id }}元</span> -->
							<span>99.98</span>
						</template>
                    </el-table-column>
                    <el-table-column label="订单金额">
                        <template #default="scope">
							<!-- <span>￥{{ scope.row.id }}元</span> -->
							<span>99.98</span>
						</template>
                    </el-table-column>
                    <el-table-column label="实付金额">
                        <template #default="scope">
							<!-- <span>￥{{ scope.row.id }}元</span> -->
							<span>99.98</span>
						</template>
                    </el-table-column>
                    <el-table-column label="小计金额">
                        <template #default="scope">
							<!-- <span>￥{{ scope.row.id }}元</span> -->
							<span>99.98</span>
						</template>
                    </el-table-column>
                    <el-table-column label="欠款金额">
						<template #default="scope">
							<!-- <span>￥{{ scope.row.id }}元</span> -->
							<span>99.98</span>
						</template>
					</el-table-column>
                    <el-table-column label="已用次数/时间">
						<template #default="scope">
							<!-- <span>￥{{ scope.row.id }}元</span> -->
							<span>99.98</span>
						</template>
					</el-table-column>
                    <el-table-column label="剩余次数/时间">
						<template #default="scope">
							<!-- <span>￥{{ scope.row.id }}元</span> -->
							<span>99.98</span>
						</template>
					</el-table-column>
                    <el-table-column label="状态">
						<template #default="scope">
							<!-- <span>￥{{ scope.row.id }}元</span> -->
							<span>99.98</span>
						</template>
					</el-table-column>
                    <el-table-column label="购买时间">
						<template #default="scope">
							<!-- <span>￥{{ scope.row.id }}元</span> -->
							<span>99.98</span>
						</template>
					</el-table-column>
                </el-table>
                <el-row justify="end">
                    <el-col :span="24" class="flex-end-center">
                        <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                            :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.param.pageNum" background
                            v-model:page-size="state.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
                            :total="state.total">
                        </el-pagination>
                    </el-col>
                </el-row>
			</div>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="cropper">
import { reactive, nextTick } from 'vue';
import { productList } from '/@/api/commodity';

// 定义变量内容
const state = reactive({
	isShowDialog: false,
	cropperImgBase64: '',
    param: {
		keyword: "",
		pageNum: 1,
		pageSize: 10,  
	},
    total: 0,
    goodsTableData:[],
});

// 打开弹窗
const openDialog = () => {
	state.isShowDialog = true;
	nextTick(() => {
		getGoodsList();
	});
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 更换
const getGoodsList = async() => {
    state.loading = true;
	const { results } = await productList(state.param);
	state.loading = false;
	state.goodsTableData = results.records.slice(0,1);
	state.total = results.total;
};


// 订单详情
const onOpenEditRole = (item?: any) => {
	orderListDialogRef.value.openDialog();
};

// 分页点击条数
const onHandleSizeChange = (val: number) => {
	state.param.pageSize = val;
    getGoodsList();
};
// 分页点击
const onHandleCurrentChange = (val: number) => {
	state.param.pageNum = val;
    getGoodsList();
}

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.cropper-warp {
	.cropper-warp-left {
		position: relative;
		display: inline-block;
		height: 350px;
		flex: 1;
		border: 1px solid var(--el-border-color);
		background: var(--el-color-white);
		overflow: hidden;
		background-repeat: no-repeat;
		cursor: move;
		border-radius: var(--el-border-radius-base);
		.cropper-warp-left-img {
			width: 100%;
			height: 100%;
		}
	}
	.cropper-warp-right {
		width: 150px;
		height: 350px;
		.cropper-warp-right-title {
			text-align: center;
			height: 20px;
			line-height: 20px;
		}
		.cropper-warp-right-item {
			margin: 15px 0;
			.cropper-warp-right-value {
				display: flex;
				.cropper-warp-right-value-img {
					width: 100px;
					height: 100px;
					border-radius: var(--el-border-radius-circle);
					margin: auto;
				}
				.cropper-size {
					width: 50px;
					height: 50px;
				}
			}
			.cropper-warp-right-label {
				text-align: center;
				font-size: 12px;
				color: var(--el-text-color-primary);
				height: 30px;
				line-height: 30px;
			}
		}
	}
}
</style>
